<template>
  <!-- 在element-ui文档中中form表单的表单验证
  <div>
     Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator -->
  <!-- <el-form :model="FormData" :rules="rules">
      <el-form-item label="请输入手机号" prop="mobile">
        <el-input v-model="FormData.mobile" />
      </el-form-item>
    </el-form>
    <el-form :model="FormData" :rules="rules">
      <el-form-item label="请输入密码" prop="password">
        <el-input v-model="FormData.password" />
      </el-form-item>
    </el-form>
    <el-form :model="FormData" :rules="rules">
      <el-form-item label="请再次输入密码" prop="checkPass">
        <el-input v-model="FormData.checkPass" />
      </el-form-item>
    </el-form>
  </div> -->
  <div>
    <el-button @click="loginBtn">登录</el-button>
    <h2>树形结构</h2>
    <UploadImage />
    <el-tree :data="treeData" />
  </div>
</template>

<script>
import { login } from '@/api/user'
import { asyncRoutes } from '@/router'
console.log('原来的权限列表', asyncRoutes)
// import { vaildMol } from '@/utils/validate'
export default {
  data() {
    return {
      treeData: [
        {
          label: '财务部',
          manager: '小王',
          children: [{
            label: '财务核算',
            manager: '小王',
            children: [{
              label: '税务管理',
              manager: '小王'
            }]
          }]
        },
        {
          label: '技术部',
          manager: '小王',
          children: [
            {
              label: 'Java开发部',
              manager: '小王'
            },
            {
              label: 'Python研发部',
              manager: '小王'
            },
            {
              label: 'Php研发部',
              manager: '小王'
            }
          ]
        }
      ]
    }
    // 封装手机号码验证
    // const vaildMobile = (rule, val, callback) => {
    //   // const pattern = /^1[3-9][0-9]{9}$/
    //   // const isVal = pattern.test(val)
    //   // isVal ? callback() : callback(new Error('请输入正确的手机号码'))
    //   // 封装后的优化
    //   vaildMol(val) ? callback() : callback(new Error('请输入正确的手机号码'))
    // }

    // 这是验证再次输入密码的
    // const validatePass = (rule, val, callback) => {
    //   const same = val === this.FormData.password
    //   if (same) {
    //     // 成功
    //     callback()
    //   } else {
    //     // 失败就返回新的错误信息
    //     callback(new Error('两次输入的密码必须一致'))
    //   }
    // }
    // return {
    //   FormData: {
    //     mobile: '',
    //     password: '',
    //     checkPass: ''
    //   },
    //   // element-ui 自定义验证
    //   rules: {
    //     mobile: [
    //       { required: true, message: '请输入选项', trigger: 'blur' },
    //       { validator: vaildMobile, trigger: 'blur' }
    //     ],
    //     password: [
    //       { required: true, message: '请输入选项', trigger: 'blur' },
    //       { min: 6, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    //     ],
    //     checkPass: [
    //       { required: true, message: '两次密码输入必须一致', trigger: 'blur' },
    //       { validator: validatePass, trigger: 'blur' }
    //     ]
    //   }
    // }
  },
  created() {
    const menus = this.$store.state.user.userInfo.roles.menus
    console.log('用户权限列表', menus)
    const newAsyncRoutes = asyncRoutes.filter(item => menus.includes(item.name))
    // const newAsyncRoutes = asyncRoutes.filter(item=>menus.indefOf(item.name) !== -1)
    console.log('过滤后的用户权限', newAsyncRoutes)
    console.log(114, this.$t)
  },
  mounted() {
    // user是数据层面，getUserInfo是请求函数，所以user前面不用加 /
    this.$store.dispatch('user/getUserInfo')
    // console.log(80, new Date())
    // console.log(81, Date.now())
  },
  methods: {
    loginBtn() {
      login({ mobile: '13800000002', password: '123456' })
    }
    // 在.env.development 修改基准路径
    // 修改页面请求路径基准：在api的user，js修改，然后到。.env.development修改port再到vue.config.js修改proxy配置
  }
}
</script>

<style>

</style>
